<template>
	<div style="margin-left: 5px;">
     <div>

		<div>
				<div>
           <h3 style="display:inline-block">{{Data.CodeNum}}.</h3> 
					<span v-html="Data.Title" style="display:inline-block"></span>
                    <el-input-number style="margin-left:10px" size="mini"  v-if="Data.TitleBlank" @change="checkItem()" :controls="false" v-model="Data.BlankValue"></el-input-number>
				            <el-button   @click="divvisibility(2)" type="text"  style="float:right" v-if="!preview">{{see}}</el-button>
        </div>
				<div class="option-area" style="margin: 5px;"  v-if="visible">
                    <el-table :data="tabledata" style="width: 100%">
                        <el-table-column fixed type="index" width="100" :index="GetRowTitleByIndex"></el-table-column>
                        <el-table-column v-bind:key="opt.optionId"  v-for="opt in columitem" :label="opt.optionId" >
                            <template slot-scope="scope">
                             <el-input style="width:100px" v-if="scope.row.itemType!=1" v-model="opt.blankvalue[scope.$index]"   size="mini" /> 
                             <el-input-number :controls="false" size="mini" v-if="scope.row.itemType==1" v-model="opt.blankvalue[scope.$index]"  ></el-input-number>
                             </template>
                        </el-table-column>
                      
                    </el-table>


				</div>
			</div>

	</div>
    
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
		<el-card class="box-card" style="margin-top:20px" >
  		  <EditorComponent v-model="Data.Title"  :Html="Data.Title" />
		<el-row>
                <el-col :span="8">
                    <el-card >
                        
                        <div style="padding: 14px;">
                        <span>行标题</span>
                        <div>
                        <el-input type="textarea"  @input="UpdateRowTitle" v-model="Data.RowTitleText" :rows="10" placeholder="请输入内容" ></el-input>
                      
                        </div>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="16">
                    <el-card style="margin-left:10px" >
                        
                        <el-table :fit="true" :data="Data.Options" style="width: 100%">
                            <el-table-column  label="选项文字" >
                                <template slot-scope="scope">
                                    <div id='title-row' >
                                        <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容" @change="inputchange"></el-input>
                                    </div>
                                    </template>
                            </el-table-column>


                                <el-table-column  label="数据类型">
                                    <template slot-scope="scope">
                                        <DataTypeComponent  v-model="scope.row.itemType"></DataTypeComponent>
                                    </template>
                                </el-table-column>

                                 <el-table-column  label="最小值">
                                    <template slot-scope="scope">
                                        <el-input-number size="mini" :disabled="scope.row.itemType!=1"  v-model="scope.row.MinValue"></el-input-number>
                                    </template>
                                </el-table-column>

                                 <el-table-column  label="最大值">
                                    <template slot-scope="scope">
                                        <el-input-number size="mini" :disabled="scope.row.itemType!=1" v-model="scope.row.MaxValue"></el-input-number>
                                    </template>
                                </el-table-column>

                                <el-table-column  label="操作"  >
                                        <template slot-scope="scope">
                                                <div style='display: inline-block;margin-top: 5px;'>
                                                    <el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
                                                    <el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
                                                    <el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
                                                </div>
                                        </template>
                                </el-table-column>



                         </el-table>
                         <BatchAddComponent v-model="msg"  @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
                    </el-card>
                </el-col>
        </el-row>
							

     
	      <button @click="getanswer(1)">answer</button><el-button type="text" @click="show=!show">行列转置</el-button>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="close">完成编辑</el-button>
		 
		 </el-card>
	     </div>
	</div>
</template>

<script lang='ts'>
import {Component, Vue, Watch, Prop } from 'vue-property-decorator';
    import TBaseQuestion from './ts/TBaseQuestion';
     import MatrixRadioSubject, {MatrixRadioOption} from './ts/MatrixRadioSelSubject';
     import { QuestionDataTypes ,QuestionTypes} from './ts/QuestionDataTypes';
     import DataTypeComponent from './DataTypeComponent.vue';

     import EditorComponent from './EditorComponent.vue';
     import OrderBy, {OrderByTypes} from './ts/OrderByTypes';
    import OrderByComponent from './OderByComponent.vue';
    import MatrixRowTitle from './ts/MatrixRowTitle';
    import  BatchAddComponent from './BatchAddComponent.vue';
    @Component(
     {
         components: {EditorComponent, DataTypeComponent, OrderByComponent, BatchAddComponent},
     },
 )
 // 矩阵填空组件
  export  default class MatrixFillBlankComponent  extends TBaseQuestion<MatrixRadioOption, MatrixRadioSubject> {





      public $name: string = 'MatrixFillBlankComponent';
      public canEdit = true;

      public msg = '';
      public gotMsg: string[] = [];
      public options: MatrixRadioOption[] = [];
     
        itemname="";

     



      constructor() {  
      super(MatrixRadioOption, MatrixRadioSubject);

      this.Data.DataType = QuestionDataTypes.dtText;
      this.Data.QuestionType=QuestionTypes.qtMatrixFillBlank;
      this.Data.Title="设置标题";

    for (let i: number = 0; i < 3; i++) {
              this.Data.RowTitles.push(new MatrixRowTitle(i, '标题' + (i + 1)));

          }

    this.Data.RowTitleText = this.ConvertTitleArrayToStr(this.Data.RowTitles);

    for (let i: number = 0; i < 5; ++i) {
              const opt = new MatrixRadioOption();
              opt.itemName = '选项' + i;
              for (let j: number = 0; j < this.Data.RowTitles.length; j++) {
                  opt.BlankValues.push('');
              }
              this.Data.Options.push(opt);
          }



      }

       mounted()
    {
      	super.mounted();
        this.initProps();
         console.info("component mounted!");
    }
   @Watch('Data.RowTitles')
  watchData(newVal:Array<MatrixRowTitle>, oldVal:Array<MatrixRowTitle>) {
   
       console.log("RowTitle Changed:"+newVal);
       if(newVal==null)
       return;
     this.Data.RowTitleText=this.ConvertTitleArrayToStr(newVal);

  }
       @Watch('msg')
      public getstr() {
      console.log(this.msg);
      this.gotMsg = this.msg.split('\n');
      this.gotMsg.forEach((element) => {
        if (element != ' ') {
          const opt = new MatrixRadioOption();
          opt.itemName = element;
          this.options.push(opt);
        }
        });
     this.Data.Options = this.options;
      this.options = [];
       }
       // 获取options中每一项的name
      public getOptionText(): string {
      let options = this.Data.Options[0].itemName + '\n';
      const n = this.Data.Options.length;
      for (let i = 1; i < n; i++) {
        if (i < (n - 1)) {
          options += this.Data.Options[i].itemName + '\n';
        } else {
                    options += this.Data.Options[i].itemName;
        }
      }
      return options;

    }
    itemNameArry(){
     this.itemname=this.getOptionText();
    }
    
    //显示题目内容div
public divvisibility(id:number){
  super.divvisibility(id);
}
      // 输入框内容改变
     public inputchange() {
       this.msg = this.getOptionText();
     }
    // 删除选项
  public remove(str: string): void {
    super.remove(str);
    this.msg = this.getOptionText();
  }

       // 插入选项
    public insert(id: string): void {
        const options = this.Data.Options;
        options.splice(options.findIndex((item) => item.itemId === id) + 1, 0, this.createNewOption(MatrixRadioOption));
        this.SetBlankValues();
        this.msg = this.getOptionText();
    }
  // 向上移动选项
  public moveUp(id: string): void {
    super.moveUp(id);
    this.msg = this.getOptionText();
  }
  public moveDown(id: string) {
    super.moveDown(id);
    this.msg = this.getOptionText();
  }
    // 数组转为字符串
      public ConvertTitleArrayToStr(arry: MatrixRowTitle[]): string {
         const tempArray: string[] = [];
         for (const t of arry) {
             tempArray.push(t.Title);
         }

         return tempArray.join('\n');
      }

      public GetRowTitles(): string {
          return this.ConvertTitleArrayToStr(this.Data.RowTitles);
      }


     public getQuestionData(): any {
         return this.Data;
     }

     public setQuestionData(data: string) {

     }     // 设置填空数组的长度
    public SetBlankValues(): void {

        for (const opt of this.Data.Options) {
            opt.BlankValues = [];

            for (let i = 0; i < this.Data.RowTitles.length; ++i) {
                opt.BlankValues.push('');
            }

        }
    }

     public getTitle(): void {
        // console.info(Data.Title);
         // this.Data.Title;
   }

   public setTitle(txt: string): void {
     console.info(txt);
   }

  public GetHtml(html: string): void {
        this.Data.Title = html;
    }

    public UpdateRowTitle(): void {
        const tempArray = this.Data.RowTitleText.split('\n');
        this.Data.RowTitles = [];
        let i = 0;
        for (const t of tempArray) {
            this.Data.RowTitles.push(new MatrixRowTitle(i, t));
            i++;
        }
        this.SetBlankValues();
    }

    public GetRowTitleByIndex(index: number): string {
      if(this.show===true){
        return this.Data.RowTitles[index].Title;
      }else{
        return this.tabledata[index];
      }
        
    }
//抽取答案
    getanswer(id:string):object[]{
        this.initanswer(this.Data.RowTitles.length);
        if(this.show){
          for(let i=0;i<this.columitem.length;i++){
            this.Data.answer[i]=this.columitem[i];
            for(let j=0;i<this.Data.answer[i].checkvalue.length;j++){
              this.Data.answer[i].checkvalue[j]=this.columitem[i].checkvalue[j];
            }
          }
        }
        else{
          this.columitem.forEach(element=>{
          for(let i=0;i<this.columitem.length;i++){
            this.columitem[i].blankvalue.forEach(e=>{
              let num=this.Data.answer.findIndex(element=>element.optionId===e);
              if(num>-1){
                this.Data.answer[num].checkvalue[i]=this.columitem[i].optionId;
                this.Data.answer[num].blankvalue[i]=e;
              }
            });
          }
          });
        }
        this.Data.answer.forEach(element => {
          let str=element.optionId;
          for(let i=0;i<element.blankvalue.length;i++){
            str+=element.checkvalue[i]+':'+element.blankvalue[i]+",";
          }
          console.log(str);
        });
        
        return this.Data.answer;
    }

    @Watch('show')
    setdata(){
      super.setdata();
    }

    
	close(){
       super.setdata();
       this.canEdit=false; 
    }


  }
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                flex-flow: row wrap;
                width: 100%;
                align-items:center;
                justify-content:left;
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

</style>
